<style>
    .proj_container{
        height: 100%;
        background: #FFFFFF;
    }
    .proj{
        float: left;
        width: 15%;
        height: 100%;
        background-color: #f5f5f5;
        margin: 4px;
        position: relative;
    }
    .proj_status{
        position: absolute;
        padding-left: 12px;
        background-color: #f5f5f5;
        height:36px;
        line-height: 36px;
        width: 100%;
        color: #555;
        font-size: 12px;
        margin-bottom: 0px;
        font-weight: bolder;
    }
    .unstart{
        background-color: #ffb741;
        color: #ffffff;
    }
    .doing{
        background-color: #2baab1;
        color: #ffffff;
    }
    .finished{
        background-color: #4a8d4b;
        color: #ffffff;

    }
    .testing{
        background-color: #ff7971;
        color: #ffffff;
    }
    .published{
        background-color: #23b7e5;
        color: #ffffff;
    }

    .paused{
        background-color: #ffd819;
        color: #ffffff;
    }

    .proj_status_arrow{
        font-size: 12px;
    }
    .projects{
        position: absolute;
        top: 36px;
        list-style-type:none;
        width:100%;
        height:100%;
        overflow-y:auto;
    }
    .project{
        margin: 0 8px 8px 8px;
        background-color: #FFFFFF;
        padding: 10px;
    }
    .project_title{
        font-size: 12px;
        margin-bottom: 0px;
    }
    .project_process{
        margin-top: 5px;
        font-size: 12px;
        margin-bottom: 0px;
    }
    .project_createdate{
        margin-top: 5px;
        font-size: 12px;
        margin-bottom: 0px;
    }
    .progress{
        margin-bottom:0px;
        height: 20px;
    }
</style>
<div class="proj_container">
    {% for key,value in project_status %}
        {% if key == 1 %}
            <div class="proj" id="unStartProjs">
                <p class="proj_status unstart" >未开始<span class="proj_status_arrow"> ></span></p>
                <ul class="projects" id="proj1">
                    {% for row in unStartProjs %}
                        <li class="project" ondblclick="window.top.xhTop.createNewTab('项目-{{ row['sProjectName'] }}', 'pm/task/index?iProjectId={{ row['iProjectId'] }}', true)">
                            <p class="project_title">{{ row['sProjectName'] }}</p>
                            <div class="project_process">
                                <div class="progress">
                                    <div class="progress-bar progress-bar-success" role="progressbar"
                                         aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
                                         style="width: {{ row['process'] }}%;">
                                        <span>{{ row['process'] }}%</span>
                                    </div>
                                </div>
                            </div>
                            <p class="project_createdate">{{ row['tCreateDate'] }}</p>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}
        {% if key == 2 %}
            <div class="proj" id="doingProjs">
                <p class="proj_status doing">进行中<span class="proj_status_arrow"> ></span></p>
                <ul class="projects" id="proj2">
                    {% for row in doingProjs %}
                        <li class="project" ondblclick="window.top.xhTop.createNewTab('项目-{{ row['sProjectName'] }}', 'pm/task/index?iProjectId={{ row['iProjectId'] }}', true)">
                            <p class="project_title">{{ row['sProjectName'] }}</p>
                            <div class="project_process">
                                <div class="progress">
                                    <div class="progress-bar progress-bar-success" role="progressbar"
                                         aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
                                         style="width: {{ row['process'] }}%;">
                                        <span>{{ row['process'] }}%</span>
                                    </div>
                                </div>
                            </div>
                            <p class="project_createdate">{{ row['tCreateDate'] }}</p>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}
        {% if key == 3 %}
            <div class="proj" id="testingProjs">
                <p class="proj_status testing">测试中<span class="proj_status_arrow"> ></span></p>
                <ul class="projects" id="proj3">
                    {% for row in testingProjs %}
                        <li class="project" ondblclick="window.top.xhTop.createNewTab('项目-{{ row['sProjectName'] }}', 'pm/task/index?iProjectId={{ row['iProjectId'] }}', true)">
                            <p class="project_title">{{ row['sProjectName'] }}</p>
                            <div class="project_process">
                                <div class="progress">
                                    <div class="progress-bar progress-bar-success" role="progressbar"
                                         aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
                                         style="width: {{ row['process'] }}%;">
                                        <span>{{ row['process'] }}%</span>
                                    </div>
                                </div>
                            </div>
                            <p class="project_createdate">{{ row['tCreateDate'] }}</p>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}
        {% if key == 4 %}
            <div class="proj" id="publishedProjs">
                <p class="proj_status published">已发布<span class="proj_status_arrow"> ></span></p>
                <ul class="projects" id="proj4">
                    {% for row in publishedProjs %}
                        <li class="project" ondblclick="window.top.xhTop.createNewTab('项目-{{ row['sProjectName'] }}', 'pm/task/index?iProjectId={{ row['iProjectId'] }}', true)">
                            <p class="project_title">{{ row['sProjectName'] }}</p>
                            <div class="project_process">
                                <div class="progress">
                                    <div class="progress-bar progress-bar-success" role="progressbar"
                                         aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
                                         style="width: {{ row['process'] }}%;">
                                        <span>{{ row['process'] }}%</span>
                                    </div>
                                </div>
                            </div>
                            <p class="project_createdate">{{ row['tCreateDate'] }}</p>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}
        {% if key == 5 %}
            <div class="proj" id="finishedProjs">
                <p class="proj_status finished">已完成<span class="proj_status_arrow"> ></span></p>
                <ul class="projects" id="proj5">
                    {% for row in finishedProjs %}
                        <li class="project" ondblclick="window.top.xhTop.createNewTab('项目-{{ row['sProjectName'] }}', 'pm/task/index?iProjectId={{ row['iProjectId'] }}', true)">
                            <p class="project_title">{{ row['sProjectName'] }}</p>
                            <div class="project_process">
                                <div class="progress">
                                    <div class="progress-bar progress-bar-success" role="progressbar"
                                         aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
                                         style="width: {{ row['process'] }}%;">
                                        <span>{{ row['process'] }}%</span>
                                    </div>
                                </div>
                            </div>
                            <p class="project_createdate">{{ row['tCreateDate'] }}</p>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}
        {% if key == 6 %}
            <div class="proj" id="pauseProjs">
                <p class="proj_status paused">已暂停<span class="proj_status_arrow"> ></span></p>
                <ul class="projects" id="proj6">
                    {% for row in pauseProjs %}
                        <li class="project" ondblclick="window.top.xhTop.createNewTab('项目-{{ row['sProjectName'] }}', 'pm/task/index?iProjectId={{ row['iProjectId'] }}', true)">
                            <p class="project_title">{{ row['sProjectName'] }}</p>
                            <div class="project_process">
                                <div class="progress">
                                    <div class="progress-bar progress-bar-success" role="progressbar"
                                         aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
                                         style="width: {{ row['process'] }}%;">
                                        <span>{{ row['process'] }}%</span>
                                    </div>
                                </div>
                            </div>
                            <p class="project_createdate">{{ row['tCreateDate'] }}</p>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}
    {% endfor %}
</div>
<script type="text/javascript">
    var projectStatus = {{ project_status |json_encode }};
    var bodyheight = document.body.offsetHeight;
    var projhigh = bodyheight-44;
    var projectshigh = bodyheight-8;
    var jslength=0;

    for(var p in projectStatus){//遍历json对象的每个key/value对,p为key
        jslength++;
        if(p==1){
                var proj1=document.getElementById('proj1');
                var unStartProjs=document.getElementById('unStartProjs');
                proj1.style.height=projhigh+'px';
                unStartProjs.style.height = projectshigh+'px';
        }else if(p==2){
                var proj2=document.getElementById('proj2');
                var doingProjs=document.getElementById('doingProjs');
                proj2.style.height=projhigh+'px';
                doingProjs.style.height = projectshigh+'px';
        }else if(p==3){
                var proj3=document.getElementById('proj3');
                var testingProjs=document.getElementById('testingProjs');
                proj3.style.height=projhigh+'px';
                testingProjs.style.height = projectshigh+'px';
        }else if(p==4){
                var proj4=document.getElementById('proj4');
                var publishedProjs=document.getElementById('publishedProjs');
                proj4.style.height=projhigh+'px';
                publishedProjs.style.height = projectshigh+'px';
        }else if(p==5){
                var proj5=document.getElementById('proj5');
                var finishedProjs=document.getElementById('finishedProjs');
                proj5.style.height=projhigh+'px';
                finishedProjs.style.height = projectshigh+'px';
        }else if(p==6){
                var proj6=document.getElementById('proj6');
                var pauseProjs=document.getElementById('pauseProjs');
                proj6.style.height=projhigh+'px';
                pauseProjs.style.height = projectshigh+'px';
        }

    }
    // var prowidth = 90/jslength;
    //
    // for(var p in projectStatus){//遍历json对象的每个key/value对,p为key
    //     if(p==1){
    //         var unStartProjs=document.getElementById('unStartProjs');
    //         unStartProjs.style.width = prowidth+'%';
    //     }else if(p==2){
    //         var doingProjs=document.getElementById('doingProjs');
    //         doingProjs.style.width = prowidth+'%';
    //     }else if(p==3){
    //         var testingProjs=document.getElementById('testingProjs');
    //         testingProjs.style.width = prowidth+'%';
    //     }else if(p==4){
    //         var publishedProjs=document.getElementById('publishedProjs');
    //         publishedProjs.style.width = prowidth+'%';
    //     }else if(p==5){
    //         var finishedProjs=document.getElementById('finishedProjs');
    //         finishedProjs.style.width = prowidth+'%';
    //     }else if(p==6){
    //         var pauseProjs=document.getElementById('pauseProjs');
    //         pauseProjs.style.width = prowidth+'%';
    //     }
    //
    // }
</script>